<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<title></title>

		<link rel="stylesheet" type="text/css"
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css"
			href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">
		<style type="text/css">
			body {
				background: #f7f1e3;
			}
		</style>
		<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
		<script type="text/javascript" language="javascript"
			src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript"
			src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$('#example').dataTable({
					language: {
						"decimal": "", //小数的小数位符号  比如“，”作为数字的小数位符号
				 	"emptyTable": "没有数据哟~~", //没有数据时要显示的字符串
						"info": "当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条", //左下角的信息，变量可以自定义，到官网详细查看
						"infoEmpty": "无记录", //当没有数据时，左下角的信息
						"infoFiltered": "(从 _MAX_ 条记录过滤)", //当表格过滤的时候，将此字符串附加到主要信息
						"infoPostFix": "", //在摘要信息后继续追加的字符串
						"thousands": ",", //千分位分隔符
				 	"lengthMenu": "每页 _MENU_ 条记录", //用来描述分页长度选项的字符串
						"loadingRecords": "加载中...", //用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示
						"processing": "处理中...", //用来描述加载进度的字符串
				 	"search": "搜索", //用来描述搜索输入框的字符串
						"zeroRecords": "没有找到", //当没有搜索到结果时，显示
						"paginate": {
							"first": "首页",
							"previous": "上一页",
				  	"next": "下一页",
				  	"last": "尾页"
						}
					},
					processing: true, //是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
					lengthChange: true, //是否允许用户改变表格每页显示的记录数
					orderMulti: true, //启用多列排序
				 ordering: true, //使用排序
					bStateSave: true, //记录cookie
					paging: true, //是否分页
				 pagingType: "full_numbers", //除首页、上一页、下一页、末页四个按钮还有页数按钮
					searching: true, //是否开始本地搜索
				 stateSave: false, //刷新时是否保存状态
					autoWidth: true, //自动计算宽度
					deferRender: true, //延迟渲染
				});
			});
		</script>
	</head>

	<body>
		<div class="container">
			<div class="panel panel-default mypanel" style="position: absolute; width: 90%;left: 5%;top: 20px;">
				<div class="panel-heading" style="background: #d9edf7;">顾客表</div>
				<div class="panel-body">

					<table id="example" class="table table-striped table-bordered table-hover  " cellspacing="0"
						width="100%">
						<thead style="">
							<tr>
								<th>客户ID</th>
								<th>姓名</th>
								<th>地址</th>
								<th>电话</th>
								<th>订单数</th>
							</tr>
						</thead>
						<tbody>
							{% for item in data_list %}
							<tr>
								<th scope="row">{{item.no}}</th>
								<td>{{item.name}}</td>
								<td>{{item.location}}</td>
								<td>{{item.phone}}</td>
								<td>{{item.num}}</td>
							</tr>
							{% endfor %}
						
						</tbody>
					</table>


				</div>

			</div>
		</div>







		</div>
	</body>

</html>



<!-- <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css"
			href="../../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
		<style type="text/css">
			body {
				background: #f8f8f8;
			}
		</style>
	</head>
	<body>
		<div class="panel panel-default mypanel" style="position: absolute; width: 90%;left: 5%;top: 20px;">
			<div class="panel-heading" style="background: #d9edf7;">顾客表</div>
			<div class="panel-body">

				<table class="table table-hover">
					<thead style="">
						<tr>
							<th>客户ID</th>
							<th>姓名</th>
							<th>地址</th>
							<th>电话</th>
							<th>订单数</th>
						</tr>
					</thead>
					<tbody>
						{% for item in data_list %}
						<tr>
							<th scope="row">{{item.CNO}}</th>
							<td>{{item.CNAME}}</td>
							<td>{{item.CLOCATION}}</td>
							<td>{{item.CPHONE}}</td>
							<td>{{item.order_num}}</td>
						</tr>
						{% endfor %}

					</tbody>
				</table>

			</div>
		</div>
		</div>


		<script type="text/javascript" src="../../../static/js/jquery-3.6.0.min.js">
		</script>
		<script src="../../../static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"
			charset="utf-8"></script>
	</body>
</html>
 -->